<script setup lang="ts">
import { graphic } from 'echarts/core'
import { computed, onMounted, shallowRef } from 'vue'

import useEcharts, { type EChartsOption } from '~/composables/chart'
import BlockHead from './block-head.vue'

import defaults from './default-chart-option'

import type { OrderInInfo } from '../type'

defineOptions({
  name: 'ItemTwo',
})

const props = defineProps<{
  data: OrderInInfo
}>()

const { chartRef, setOption } = useEcharts()

const data = shallowRef<{ name: string, value: string, yoy: string }[]>([])
const option = computed<EChartsOption>(() => {
  return {
    tooltip: {
      ...defaults.tooltip,
    },
    legend: {
      ...defaults.legend,
      data: ['采购成本', '同比值'],
    },
    grid: {
      ...defaults.grid,
    },
    xAxis: {
      type: 'category',
      data: data.value.map(v => v.name),
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      name: '采购成本',
      type: 'bar',
      barWidth: 8,
      data: data.value.map(v => v.value),
      itemStyle: {
        borderWidth: 1,
        borderColor: '#2E89FA',
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#2DDFFF' },
          { offset: 1, color: 'rgba(46,137,250,0.27)' },
        ]),
      },
    }, {
      name: '同比值',
      type: 'line',
      data: data.value.map(v => v.yoy),
      smooth: false,
      showSymbol: true,
      symbol: 'emptyCircle',
      symbolSize: 7,
      lineStyle: {
        width: 2,
      },
      itemStyle: {
        color: '#A5EFAE',
      },
    }],
  }
})

onMounted(() => {
  data.value = props.data.map((v) => {
    return {
      name: v.name,
      value: v.value1,
      yoy: v.value2,
    }
  })
  setOption(option.value)
})
</script>

<template>
  <div class="w-full flex flex-auto flex-col">
    <BlockHead title="采购趋势分析" />
    <div class="block-body h-62 w-full flex-auto">
      <div ref="chartRef" style="width:100%;height:100%" />
    </div>
  </div>
</template>
